Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@solid-primitives/keyboard
Advanced tools
A library of reactive promitives helping handling user's keyboard input.
A library of reactive promitives helping handling user's keyboard input.
useKeyDownEvent
— Provides a signal with the last keydown event.useKeyDownList
— Provides a signal with the list of currently held keysuseCurrentlyHeldKey
— Provides a signal with the currently held single key.useKeyDownSequence
— Provides a signal with a sequence of currently held keys, as they were pressed down and up.createKeyHold
— Provides a signal indicating if provided key is currently being held down.createShortcut
— Creates a keyboard shotcut observer.npm install @solid-primitives/keyboard
# or
pnpm add @solid-primitives/keyboard
# or
yarn add @solid-primitives/keyboard
useKeyDownEvent
Provides a signal with the last keydown event.
This is a singleton root primitive that will reuse event listeners and signals across dependents.
useKeyDownEvent
takes no arguments, and returns a signal with the last keydown event.
import { useKeyDownEvent } from "@solid-primitives/keyboard";
const event = useKeyDownEvent();
createEffect(() => {
const e = event();
console.log(e); // => KeyboardEvent | null
if (e) {
console.log(e.key); // => "Q" | "ALT" | ... or null
e.preventDefault(); // prevent default behavior or last keydown event
}
});
useKeyDownList
Provides a signal with the list of currently held keys, ordered from least recent to most recent.
This is a singleton root primitive that will reuse event listeners and signals across dependents.
useKeyDownList
takes no arguments, and returns a signal with the list of currently held keys
import { useKeyDownList } from "@solid-primitives/keyboard";
const keys = useKeyDownList();
createEffect(() => {
console.log(keys()); // => string[] — list of currently held keys
});
<For each={keys()}>
{key => <kbd>{key}</kdb>}
</For>
useCurrentlyHeldKey
Provides a signal with the currently held single key. Pressing any other key at the same time will reset the signal to null
.
This is a singleton root primitive that will reuse event listeners and signals across dependents.
useCurrentlyHeldKey
takes no arguments, and returns a signal with the currently held single key.
import { useCurrentlyHeldKey } from "@solid-primitives/keyboard";
const key = useCurrentlyHeldKey();
createEffect(() => {
console.log(key()); // => string | null — currently held key
});
useKeyDownSequence
Provides a signal with a sequence of currently held keys, as they were pressed down and up.
This is a singleton root primitive that will reuse event listeners and signals across dependents.
useKeyDownSequence
takes no arguments, and returns a single signal.
import { useKeyDownSequence } from "@solid-primitives/keyboard";
const sequence = useKeyDownSequence();
createEffect(() => {
console.log(sequence()); // => string[][] — sequence of currently held keys
});
// example sequence of pressing Ctrl + Shift + A
// [["Control"], ["Control", "Shift"], ["Control", "Shift", "A"]]
createKeyHold
Provides a boolean
signal indicating if provided key is currently being held down.
Holding multiple keys at the same time will return false
— holding only the specified one will return true
.
createKeyHold
takes two arguments:
key
keyboard key to listen foroptions
additional configuration:
preventDefault
— call e.preventDefault()
on the keyboard event, when the specified key is pressed. (Defaults to true
)import { createKeyHold } from "@solid-primitives/keyboard";
const pressing = createKeyHold("Alt", { preventDefault: false });
<p>Is pressing Alt? {pressing() ? "YES" : "NO"}</p>;
createShortcut
Creates a keyboard shotcut observer. The provided callback will be called when the specified keys are pressed.
createShortcut
takes three arguments:
keys
— list of keys to listen forcallback
— callback to call when the specified keys are pressedoptions
— additional configuration:
preventDefault
— call e.preventDefault()
on the keyboard event, when the specified key is pressed. (Defaults to true
)requireReset
— If true
, the shortcut will only be triggered once until all of the keys stop being pressed. Disabled by default.import { createShortcut } from "@solid-primitives/keyboard";
createShortcut(
["Control", "Shift", "A"],
() => {
console.log("Shortcut triggered");
},
{ preventDefault: false, requireReset: true },
);
When preventDefault
is true
, e.preventDefault()
will be called not only on the keydown event that have triggered the callback, but it will optimistically also prevend the default behavior of every previous keydown that will have the possibility to lead to the shotcut being pressed.
E.g. when listening for Control + Shift + A
, all three keydown events will be prevented.
Working demo of some of the primitives in keyboard package:
https://codesandbox.io/s/solid-primitives-keyboard-demo-s2l84k?file=/index.tsx
See CHANGELOG.md
FAQs
A library of reactive promitives helping handling user's keyboard input.
We found that @solid-primitives/keyboard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.